<!doctype html>
<jsp:directive.page import="com.cn.ccp.bean.UserBean" />
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<html>
<f:view>
<f:loadBundle var="messages" basename="messages"></f:loadBundle>
<head>
<meta charset="utf-8">
<title><h:outputText value="#{messages['system_title']}" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- styles -->
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/custom.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="../../js/html5.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/icon/favicon.png">
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/My97DatePicker/WdatePicker.js"></script>
    <%
		UserBean users = (UserBean) session.getAttribute("userBean");
			if ((users == null) || (users.getUserName().equals(""))) {
	%>
		<jsp:forward page="../../sessionInvalid.jsp" />
	<%
	}
	%>
</head>
<script type="text/javascript">
function change(type)
{
	var fselect;
	var tselect;
	var intput=document.getElementsByTagName("input")[0];
	var selects=document.getElementsByTagName("select");
	
	
	if(selects.length==2)
	{
		if(type=="select")
		{
			fselect=selects[0];
			tselect=selects[1];
		}else
		{
			fselect=selects[1];
			tselect=selects[0];
		}
		var options=fselect.options;
		for(var i=0;i<options.length;i++)
		{
			var op=options[i];
			if(op.selected==true)
			{
				op.selected=false;
				tselect.appendChild(op);
				i--;
			}
		}
	}
	var val="";
	
	for(var i=0;i<selects[0].options.length;i++)
		{
			
			var op=selects[0].options[i];
			val+=op.value+",";
		}
		intput.value=val;
		
}
</script>
<body class="bg-white" style="overflow-x:hidden;">
	<h:form>
		<div class="row page-head">
			<h3 class="page-title">
				<i class="n-icon-selection  n-icon-black"></i><h:outputText value="#{messages['menu_mange_page_title']}"/>&nbsp;&gt;&nbsp;<b><h:outputText value="#{messages['role_page_title']}" /></b>
			</h3>
		</div>
		<div style="margin-left: 20px;margin-right: 20px">
			<table border="0" align="center" cellpadding="2" cellspacing="1"
				class="table_attention">
				<tr>
					<td colspan="2" class="td_content">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr align="center">
								<td>
									<h4 class="page-title"><h:outputText value="#{messages['menu_mange_page_set_has_role']}"></h:outputText></h4>
								</td>
								<td rowspan="2">
									<button type="button" class="button1"
										onclick="change('select');">
										&gt;&gt;&gt;
									</button>
									<br>
									<br>
									<button type="button" class="button1"
										onclick="change('diselect');">
										&lt;&lt;&lt;
									</button>
								</td>
								<td>
									<h4 class="page-title"><h:outputText value="#{messages['menu_mange_page_set_has_no_role']}"></h:outputText></h4>
								</td>
							</tr>
							<tr align="center">
								<td>
									<h:selectManyListbox size="10" >
										<f:selectItems value="#{menuManageAction.selectRoleItem}" />
									</h:selectManyListbox>
								</td>
								<td>
									<h:selectManyListbox size="10" >
										<f:selectItems value="#{menuManageAction.noSelectRoleItem}" />
									</h:selectManyListbox>
								</td>

							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td class="td_button" colspan="3">
						<h:form>
							<h:inputHidden value="#{menuManageAction.selectRoleStr}"></h:inputHidden>
							<h:inputHidden value="#{menuManageAction.userid}"></h:inputHidden>
							<a4j:commandButton value="#{messages['btn_submit']}" styleClass="btn btn-primary" ajaxSingle="true" action="#{menuManageAction.submitUserRole}"></a4j:commandButton>
							<a4j:commandButton value="#{messages['btn_cancel']}" action="main" styleClass="btn" ajaxSingle="true" immediate="true"></a4j:commandButton>
						</h:form>
					</td>
				</tr>
			</table>
		</div>
	</h:form>
	<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
</body>
</f:view>
</html>
